<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局</title>
</head>
<style>
    .main{
        display: flex;
        background: #000
    }
    .main div{
        width:30px;
        height:100px;
        background:#fff;
        margin: 20px
    }
    .mian2{
        display:inline-flex;
        flex-direction: column;
        flex-wrap: wrap;

        width:300px;
        height:400px;
        background:#f99;
    }
    .mian2 a {
        width: 50px;
        height: 100px;
        margin: 10px;
        padding: 10px;
        display: inline-block;
        background: #f00
    }
</style>

{#flex-flow: column wrap;#方向和换行的简写模式}
 {#行内元素也可使用flex 布局 diplay:inline-flex#}

{#align-items属性定义项目在交叉轴上如何对齐。

 box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

justify-content属性定义了项目在主轴上的对齐方式。
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}


设置在item上面的属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
  flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
  flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。#}

<body>
    <div class="main">
        <div class="child1"></div>
        <div class="child1"></div>
        <div class="child1"></div>
        <div class="child1"></div>
        <div class="child1"></div>
    </div>
    <div class="mian2">
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
    </div>
</body>
</html>